<template>
  <view>
    <view class="container">
      <view class="product_image">
        <swiper
          indicator-dots="indicator_dots"
          autoplay="autoplay"
          circular="circular"
          indicator-active-color="#eb4450"
          @click="preview"
        >
          <swiper-item v-for="(item, index) in productList.pics" :key="index">
            <image mode="widthFix" :src="item.pics_mid_url" />
          </swiper-item>
        </swiper>
      </view>
      <view class="product_price">
        <view class="price_left">￥{{productList.goods_price}}</view>
        <view class="price_right">
          <view class="share">
            <button class="share iconfont icon-zhuanfa" open-type="share"></button>
          </view>
          <view
            @click="fav"
            class="collect iconfont"
            :class="isFav?'icon-shoucang':'icon-shoucang1'"
          ></view>
        </view>
      </view>
      <view class="product_title">{{productList.goods_name}}</view>
    </view>
    <view class="detail_container">
      <view class="title">图文详情</view>
      <rich-text :nodes="productList.goods_introduce"></rich-text>
    </view>
    <!-- 加入购物车操作栏 -->
    <view class="action_container">
      <!-- 联系客服 -->
      <view class="concat_container">
        <!-- 客服icon -->
        <button open-type="contact" class="iconfont icon-kefu"></button>
        <view class="text">联系客服</view>
      </view>
      <!-- 购物车 -->
      <view class="cart_container">
        <view class="iconfont icon-gouwuche"></view>
        <view @click="jumToCart" class="text">购物车</view>
      </view>
      <!-- 加入购物车按钮 -->
      <view class="add_cart" @tap="addCart">加入购物车</view>
      <!-- 立即购买 -->
      <view @click="bayNow" class="buy_now">立即购买</view>
    </view>
  </view>
</template>
<script>
import http from "../utils/http";
export default {
  data() {
    return {
      productList: {},
      indicator_dots: true,
      autoplay: true,
      circular: true,
      goods_id: "",
      isFav: false
    };
  },
  async onLoad(e) {
    // console.log(this.productList);
    this.goods_id = e.goods_id || "";
    // console.log(this.goods_id);
    await this.getProductList();
    // 1、读取storage收藏列表
    const favList = uni.getStorageSync("product_fav") || [];
    // console.log(favList);
    // 2、通过find函数查找当前商品是否存在列表中
    const isExect = favList.find(item => {
      if (item.goods_id === this.productList.goods_id) {
        return item;
      }
    });
    // console.log(isExect);
    // 3、如果存在，记录到data的一个属性中
    if (isExect) {
      this.isFav = true;
    }
    // 4、在tempalte中修改class名
  },
  methods: {
    // 获取每个商品的详情信息
    async getProductList() {
      this.productList = await http.get(
        "/goods/detail",
        { goods_id: this.goods_id },
        "GET"
      );
      // console.log(this.productList);
    },
    preview() {
      const pics = this.productList.pics.map(pic => {
        return pic.pics_big_url;
      });
      uni.previewImage({
        urls: pics
      });
    },
    async fav() {
      // 先读取原来收藏的商品
      // getStorage是一个异步接口 data返回数据的是一个数组[errr, 数据]
      const [err, res] = await uni.getStorage({
        key: "product_fav"
      });
      // console.log(res);
      const allFav = res ? res.data : [];

      if (res) {
        // 判断收藏列表是否已经存在该商品，如果存在，不执行任何操作，否则才push商品到列表
        const index = allFav.findIndex(item => {
          if (item.goods_id === this.productList.goods_id) {
            return item;
          }
        });
        // console.log(index);
        // 如果商品不存在，加入收藏列表
        if (index === -1) {
          allFav.push(this.productList);
          this.isFav = true;
        } else {
          allFav.splice(index, 1);
          this.isFav = !this.isFav;
        }
      } else {
        // console.log(this.productList);
        allFav.push(this.productList);
      }
      // console.log(allFav);

      // 把商品数据存储到本地缓存
      uni.setStorage({
        key: "product_fav",
        data: allFav
      });
    },
    addCart() {
      /**
       * 	 *  👣 1、给按钮添加点击事件，点击后执行加入动作
       * 	    2、通过uni.getStorageSync获取原来购物车内容，如果购物车还没创建，就新建购物车
       * 		3、否则把商品对象加入购物车
       * 		4、如果购物车有相同的商品，商品的数量应该+1操作
       * 		5、把数据写入到缓存中，uni.setStorageSync
       */
      const cart = uni.getStorageSync("cart") || [];
      // 查找购物车中是否已经有当前商品,target表示找到的商品
      const index = cart.findIndex(item => {
        if (item.goods_id === this.productList.goods_id) {
          return item;
        }
      });
      // index > -1 表示购物车存在相同商品
      if (index > -1) {
        cart[index].counter = cart[index].counter + 1;
      } else {
        // 因为product数据默认没有counter字段，这里是新加入购物车，所以需要初始化counter
        this.productList.counter = 1;
        cart.push(this.productList);
      }
      // 写入缓存
      uni.setStorageSync("cart", cart);
      // 显示加入购物车成功的提示
      uni.showToast({
        title: "加入购物车成功",
        icon: "none"
      });
    },
    jumToCart() {
      // 跳转到购物车
      uni.switchTab({
        url: "/pages/cart/index"
      });
    },
    bayNow() {
      this.addCart();
      setTimeout(() => {
        this.jumToCart();
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .product_image {
    height: 497rpx;
    swiper {
      height: 100%;
    }
    swiper-item {
      display: flex;
      justify-content: center;
      image {
        width: 497rpx;
      }
    }
  }
  .product_price {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    .price_left {
      color: #ea4350;
      font-size: 36rpx;
    }

    .price_right {
      display: flex;
      justify-content: center;
      align-items: center;
      .share {
        border: none;
        padding: 0;
        line-height: 1;
        background: none;
      }
      .iconfont {
        font-size: 40rpx;
      }
      .collect {
        margin-left: 46rpx;
        color: #fcaa23;
      }
    }
  }
  .product_title {
    font-size: 30rpx;
    color: #434343;
    font-weight: bold;
    padding: 0 34rpx;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 48rpx;
  }
}
.detail_container {
  border-top: 19rpx solid #f5f5f5;
  .title {
    font-size: 28rpx;
    color: #434343;
    font-weight: bold;
    text-align: center;
    margin: 19rpx 0;
  }
}
.action_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 50rpx;
  background: #fff;
  border-top: 1rpx solid #dedede;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 94rpx;
  button {
    padding: 0;
    line-height: 1;
    background: none;
    &::after {
      border: none;
    }
  }

  .concat_container,
  .cart_container {
    font-size: 20rpx;
    color: #434343;
    display: flex;
    flex-direction: column;
    align-items: center;
    .iconfont {
      font-size: 34rpx;
    }
  }
  .add_cart,
  .buy_now {
    background: #fcaa23;
    border-radius: 30rpx;
    color: #fff;
    font-size: 26rpx;
    width: 196rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .buy_now {
    background: #ea4350;
  }
}
</style>